VChart 2.0.19
Tutorials
Contributing
Options
API
FAQ
Themes 🌼
Changelogs
Online Customization
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Data Story Framework

Intelligent visual storytelling, data story creation framework.

VSeed Data Seed

VSeed, an elegant data composer, transforming complexity into simplicity.

!!!###!!!title=133-How to control the display order of discrete legends——VisActor/VChart FAQ documents!!!###!!!

How to control the display order of discrete legends?

Problem Description

As shown in the figure below, how can I control the display order of list legends:

solution

For most charts, the order of the list legend is determined by the order of the grouping fields in the data. We can achieve this through the following methods:

  • Directly adjust the order of data
  • Set the domain of the measurement corresponding to the grouping field
  • If the legend component of the chart provides corresponding configuration, you can also directly operate on the legend data.

The following is an introduction to how to configure on VChart. VChart supports direct configuration of the domain of the grouping field and direct control of the data of the legend component. You can choose which method according to your own needs.

  • Set the domain of the measurement corresponding to the grouping field

As shown in the figure below, you can configure the domain attribute of the corresponding field on the data attribute, and configure sortIndex to indicate sorting according to the declared domain attribute, so that you can control the display order of the legend.

Note that by configuring the domain of a field on the data it not only affects the order in which the legend is displayed, but also the order in which the data is drawn.

  • Customize the display order through the legends.data property

In addition, you can also directly modify the order of the legend components to achieve the goal. legends.data is a callback type that will pass the drawing order of the legend to the user as a parameter. The user can perform the order or other operations according to their own needs, but it needs Note that the returned data must conform to the format of the legend order.

If you simply want to reverse the order of the legends, you can also directly enable the legends.reverse property.

Code Example